<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-09 21:19:16
 * @LastEditTime: 2024-06-15 13:47:10
 * @FilePath: \env-manager-pc\src\views\data_query\pollute_err\components\Inspecting.vue
-->
<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import dayjs from 'dayjs'
import type { DeclareForm } from './page'
import { rules, useInitForm } from './page'
import { DeclareState } from '@/api/modules/types/data.query'
import { ModelType } from '@/types/common'
import dataQueryApi from '@/api/modules/data.query'

const emits = defineEmits(['submit'])
const dialogVisible = ref(false)
const { formData, initForm } = useInitForm()
const formRef = ref<FormInstance>()
const btnLoading = ref(false)
const modelType = ref(ModelType.add)
const tempRowData = ref<DeclareForm>({} as DeclareForm)

function open(options: any) {
  modelType.value = options.type
  if (options.data) {
    tempRowData.value = { ...options.data as DeclareForm }
  }
  getDeclearDetail(tempRowData.value)
  dialogVisible.value = true
}

function doLoading(flag: boolean) {
  btnLoading.value = flag
}

const isReadonly = computed(() => {
  return modelType.value === ModelType.readonly
})

function submit(isPass: boolean) {
  formRef.value?.validate((vaild) => {
    if (vaild) {
      emits('submit', { data: { ...tempRowData.value, ...formData.value }, isPass }, doLoading)
    }
  })
}

function getDeclearDetail(data: any) {
  dataQueryApi.GetReuseExDeclare({
    produceObjID: data.ProduceObjID,
    reusePartObjID: data.ReusePartObjID,
    startTime: data.StartTime,
  }).then((res) => {
    tempRowData.value = res
  })
}

function close() {
  dialogVisible.value = false
  btnLoading.value = false
  initForm()
  formRef.value?.resetFields()
}

function typeColor(type: number) {
  switch (type) {
    case DeclareState.Declaring:
      return 'primary'
    case DeclareState.Completed:
      return 'success'
    case DeclareState.DeclareFail:
      return 'danger'
    case DeclareState.Inspecting:
      return 'warning'
  }
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    title="审批"
    width="80%"
    top="1%"
    draggable
    @closed="close"
  >
    <div class="max-h-[65vh] w-full overflow-x-hidden overflow-y-auto">
      <ElForm ref="formRef" label-width="180px" label-suffix="：" :model="formData" :rules="rules">
        <ElRow :gutter="30">
          <ElCol :span="12">
            <ElFormItem label="企业名称" prop="EntName">
              {{ tempRowData.EntName }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="治理设施" prop="ReuseName">
              {{ tempRowData.ReuseName }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="申报理由" prop="ReportContent">
              {{ tempRowData.ReportContent }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="相关附件" prop="Files">
              <DeclearFileUpload :notip="false" readonly is-ex :files="tempRowData.Files" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="检修日期" prop="StartTime">
              {{ dayjs(tempRowData.StartTime).format('YYYY-MM-DD HH:mm') }} 至 {{ dayjs(tempRowData.EndTime).format('YYYY-MM-DD HH:mm') }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="申报人" prop="ReportName">
              {{ tempRowData.ReportName }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="联系电话" prop="ReportTel">
              {{ tempRowData.ReportTel }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="申报时间" prop="ReportTime">
              {{ tempRowData.ReportTime }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="审核状态" prop="DeclareStateName">
              <el-tag :type="typeColor(tempRowData.DeclareStateID)">
                {{ tempRowData.DeclareStateName }}
              </el-tag>
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="审核通过或驳回的理由" prop="inspectContent">
              <el-input v-model="formData.inspectContent" type="textarea" placeholder="请输入审核通过或驳回的理由" :disabled="isReadonly" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="审核人" prop="inspectName">
              <el-input v-model="formData.inspectName" placeholder="请输入审核人" :disabled="isReadonly" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="联系电话" prop="inspectTel">
              <el-input v-model="formData.inspectTel" placeholder="请输入联系电话" :disabled="isReadonly" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <template v-if="!isReadonly">
          <el-button type="danger" :loading="btnLoading" @click="submit(false)">
            退回
          </el-button>
          <el-button type="success" :loading="btnLoading" @click="submit(true)">
            通过
          </el-button>
        </template>
      </span>
    </template>
  </el-dialog>
</template>
